<template>
  <div>
    <div class="box">
      <van-cell-group style="border: 1px solid black; margin: 3px">
        <van-field
          v-model="value"
          placeholder="请输入你的任务名称，按回车确定"
          @keydown.enter="add()"
        />
      </van-cell-group>

      <div class="box1">
        <div v-for="(item, index) in this.$store.state.list" :key="item.id">
          <span
            ><input type="checkbox" :checked="item.ck" @click="up(index)"
          /></span>
          <p>{{ item.count }}</p>
          <div class="dd"><van-button @click="rem(index)">删除</van-button></div>
        </div>

      </div>

      <div class="buttom">
        <div class="dv">
          <span><input type="checkbox" :v-model="this.$store.state.qx" @click="ckall">全选</span>
          <span>已选择{{num}}/未选择{{num1}}</span>
        </div>
        <div>
          <span v-if="this.$store.state.sc==0"><button @click="remove()">删除选中</button></span>
          <span v-else></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {

      value: "",
     
    };
  },
  computed:{
    num(){
      var num=0
      num+=this.$store.state.list.filter(res=>{
        return res.ck==1
      }).length
      return num
    },
    num1(){
     var num1=0
      num1+=this.$store.state.list.filter(res=>{
        return res.ck==0
      }).length
      return num1
    },
  },
  methods: {
    add() {
    if(this.value!=''){
       this.$store.commit('add',this.value)
      this.value=''
    }
    },
    up(index) {
     this.$store.commit('up',index)
    },
    ckall(){
      this.$store.commit('ckall')
    },
    remove(){
     this.$store.commit('remove')
    },
    rem(index){
      this.$store.commit('rem',index)
    }
  },
};
</script>

<style lang="scss">
.box {
  width: 600px;
  margin: 0 auto;
  border: 1px solid black;
}
.box1 {
  > div {
    height: 50px;
    border: 1px solid black;
    display: flex;
    align-items: center;
    margin: 3px;
    position: relative;
  }
}
.buttom{
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 5px;
  align-items: center;
}
.dv{
  width: 300px;
  display: flex;
  justify-content: space-around;
}
.dd{
  position: absolute;
  right: 0;
  display: none;
}
.box1>div:hover{
  background-color: #ccc;
  .dd{
    display: block;
  }
}
</style>
